<!-- 
   excel导入
     场景: 批量创建多个员工
     做法: 1.其它部门的人把excel表格按照我们要求的格式准备好 2.前端实现导入功能进行excel导入
     技术手段: 
       1. 前端主导 (excel解析发生在浏览器中 所有数据量小的场景)
            使用插件xlsx解析excel文件 -> js格式的对象(数组) -> 二次加工处理变成接口需要的格式
            -> 调用后端接口 -> 后端拿到接口调用中传过来的数据[] -> 落入数据库 -> 返给前端

       2. 后端主导 (exlce解析发生在服务端 多核处理 适合大数据量的场景)
            前端以文件上传的形式把excel文件通过调用接口传给后端 -> 后端拿到传过来的文件做解析处理
            -> 落入数据中 -> 返给前端新数据

     前端主导：
       xlsx插件  在实际工作中 从使用插件到解析完数据 都直接copy代码就可以
       把解析之后的数据 做二次处理 不是固定 处理成啥样子按照实际要求来
      
  
   excel导出
      场景: 其它部门需要数据做数据分析 -> excel
      做法: 前端做导出 （按照运营人员的要求）
      技术手段: 
        1. 前端主导 (数据少)
           确认要导出哪些字段(header) -> 调用接口获取要导出的数据 -> 在得到的包含了所有字段数据中根据表头做二次筛选
           -> 交给导出插件 -> 生成excel文件并且自动触发浏览器的下载规则进行下载

        2. 后端主导 (数据多)
           前端调用接口告诉后端要导出哪些数据 -> 后端拿到请求参数进行数据筛选然后返回 -> 不是一般的json字符串
           是一个blob流的类型 -> 浏览器识别进行下载
    
   路由跳转
      1. path + query  
         url?id=1001
         $route.query.id
         this.$router.push({
            path:'/detail',
            query:{
               id:1001
            }
         })

      2. name + params
         url/1001
         $route.params.id
         this.$router.push({
            name:"detail",
            params:{
               id:1001
            }
         })

         {
            name:'detail',
            path:'/detail/:id',
            component: Detail
         }

      推荐写法：除了只有一个参数或者没有参数的情况 一律不建议拼接字符串

  常见bug
   1. Object(...) is not a function     
      模块导入导出没对应上   名称没对应   模块的导入导出没对上(默认 / 按需)

   2. 插件
      定义  注册
      unknow custom element  <upload-excel/>  did you register

   3. 组件 name
      注意tempalte中有没有使用了一个同名的子组件 和 name选项相同
      <template>
        <foo-component/>
      </template>

      name:'foo-comoponent / FooComponent'

      引起递归调用 导致调用栈内存溢出


 -->